import React, { useState, useEffect } from 'react';
import { Button, Card, Form, Input, Col, Row, Divider } from 'antd';
import CommonLoading from '@/components/CommonLoading';
import IconFont from '@/components/IconFont';
import CommonModal from '@/components/CommonModal';
import { isEqual } from 'lodash';
import styles from '../../index.module.less';

const PayMent = ({ payVisible, paymentView, handleOk, handleCancel }) => {
  const [form] = Form.useForm();

  const [loading, setLoading] = useState(false);

  //提交
  const onOk = () => {
    form
      .validateFields()
      .then((value) => {
        const obj = Object.assign({}, value, {
          repaymentAmount: paymentView.amountDue,
        });
        handleOk(obj);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  //取消
  const onCancel = () => {
    handleCancel();
  };

  useEffect(() => {
    form.resetFields();
  }, [paymentView]);

  const clearMoney = () => {
    form.setFieldsValue({
      repaymentAmount: '',
    });
  };

  return (
    <CommonModal
      title="账期还款"
      visible={payVisible}
      footer={[
        <Button onClick={onCancel} key="cancel">
          取消
        </Button>,
        <Button onClick={onOk} key="confirm" type="primary">
          确定
        </Button>,
      ]}
      onCancel={onCancel}
      width={700}
    >
      <Form
        // {...layout}
        form={form}
        name="period-repay"
        style={{ marginBottom: '16px' }}
        // onFinish={onFinish}
        initialValues={{
          repaymentAmount: paymentView.amountDue,
        }}
      >
        <div className={`common-color11 ${styles.cardTitleStyle}`}>
          支付方式
        </div>
        <div style={{ display: 'flex' }}>
          <div className={styles.cardWrapper}>
            <Card
              className={styles.cardStyle} /* onClick={() => setMethod(1)} */
            >
              <span className={styles.absolutedCenter}>
                <IconFont
                  type="iconyue2"
                  style={{ fontSize: '28px', marginRight: '12px' }}
                ></IconFont>
                <div>
                  <span
                    className="common-color11"
                    style={{ fontSize: '14px', lineHeight: '14px' }}
                  >
                    余额支付
                  </span>
                  <div
                    className="common-color9"
                    style={{ fontSize: '10px', lineHeight: '10px' }}
                  >
                    免手续费
                  </div>
                </div>
              </span>
              <div className={styles.checkedBox}>
                <IconFont
                  type="iconxuanzhongjiaobiao"
                  style={{ width: '18px', height: '16px' }}
                />
              </div>
            </Card>
          </div>
        </div>

        {/* <Row gutter={20}>
          <Col span={10}>
            <Form.Item label="还款金额" name="repaymentAmount">
              <Input
                suffix={
                  <div
                    onClick={() => {
                      clearMoney();
                    }}
                  >
                    <IconFont type="iconedit"></IconFont>
                  </div>
                }
              />
            </Form.Item>
          </Col>
          <Col span={8}>
          <div>
            应还金额：
            <span className="common-color9">{paymentView.amountDue}(元)</span>
          </div>
          </Col>
        </Row> */}

        <Form.Item label="">
          <div>
            应还金额：
            <span className="common-color9">{paymentView.amountDue}(元)</span>
          </div>
        </Form.Item>

        <Divider />
        <Form.Item label="可用金额">
          <span className="common-color9">
            {paymentView.availableBalance}(元)
          </span>
        </Form.Item>
        <Form.Item
          label="支付密码"
          type="password"
          name="password"
          rules={[
            {
              required: true,
              message: '请输入支付密码!',
            },
            {
              pattern: /^[0-9]*$/,
              message: '支付密码为数字',
            },
          ]}
        >
          <Input.Password
            placeholder="请输入支付密码"
            iconRender={(visible) => (
              <div>
                <IconFont
                  type={visible ? 'iconzhengyan' : 'iconbiyan'}
                ></IconFont>
              </div>
            )}
          />
        </Form.Item>
      </Form>
      <CommonLoading loading={loading} />
    </CommonModal>
  );
};

export default React.memo(PayMent, (prev, next) => {
  if (
    prev.payVisible !== next.payVisible ||
    !isEqual(prev.paymentView, next.paymentView)
  ) {
    return false;
  }
  return true;
});
